<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="view1">
			<view class="items" v-for="(item, index) in list1" :key="index" @click="goTo(item)"
				:style="{ borderBottom: index == list1.length - 1 ? 'none' : '1px solid rgba(179, 173, 173, 0.2)' }">
				<view class="left">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="right">
					<view class="header">
						<view class="title">{{ item.label }}</view>
						<view :class="!item.falg ? 'red' : ''"></view>
					</view>
					<view class="bottom">
						<view class="answer">{{ item.answer }}</view>
						<view class="date">{{ item.date }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="view2">
			<view class="items" v-for="(item, index) in list2" :key="index" @click="goTo(item)">
				<view class="left">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="right">
					<view class="header">
						<view class="title">{{ item.label }}</view>
						<view :class="!item.falg ? 'red' : ''"></view>
					</view>
					<view class="bottom">
						<view class="answer">{{ item.answer }}</view>
						<view class="date">{{ item.date }}</view>
					</view>
				</view>
			</view>

			<div class="view3">
				<scroll-view @scrolltolower="lowerBottom" class="box_scroll" scroll-y="true" refresher-enabled="true"
					:refresher-triggered="triggered" :refresher-threshold="50" refresher-background="#f8f8f8"
					@refresherrefresh="onRefresh" @refresherrestore="onRestore">

					<view class="items" v-for="(item, index) in list3" :key="index" @click="goTo(item)">
						<view class="left">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="right">
							<view class="header">
								<view class="title">{{ item.createByNickName }}</view>
								<view :class="!item.isRead ? 'red' : ''"></view>
							</view>
							<view class="bottom">
								<view class="answer">{{ item.noticeTitle }}</view>
								<view class="date">{{ item.createTime }}</view>
							</view>
						</view>
					</view>
					<view class="zanwu" v-if="list3.length == 0">暂无数据</view>
					<u-loadmore v-if="list3.length != 0" fontSize="25" :status="status" />
				</scroll-view>
			</div>

		</view>

		<Tabbar :tabbar-index="tabbarIndex" @updateTabbar="updateTabbar"></Tabbar>
	</view>
</template>

<script>
	import {
		systemInfo
	} from '../../../utils/mixin'
	import {
		noticeList
	} from '@/api/index.js'
	import Tabbar from "@/components/tabbar/tabbar.vue"
	import config from '@/config/config.js'
	export default {
		components: {
			Tabbar
		},
		mixins: [systemInfo],
		data() {
			return {
				tabbarIndex: 3,
				list1: [{
						label: '系统公告',
						date: '2024-12-10',
						answer: '平台公告最新通知',
						falg: 1,
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753777151830_8e0d4c5e/gonggao.png?x-oss-process=image/resize,w_300',
					},
					{
						label: '积分兑换商品',
						date: '',
						answer: '',
						falg: 1,
						img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753777287779_c59b5c19/jifens.png?x-oss-process=image/resize,w_300'
					},
				],
				list2: [{
					label: '乌鲁木齐天山区分校',
					date: '2024-12-10',
					answer: '恐龙的生活怎么区分',
					falg: 1,
					img: 'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753777705565_d2445f74/xuexiao.png?x-oss-process=image/resize,w_300',
					id: 0
				}, ],
				list3: [

				],


				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				status: 'loadmore',
				triggered: false,
				downRefresh: false,
				pageCount: 0,
			}
		},
		onLoad() {


		},
		onShow() {
			// #ifdef APP-PLUS || H5
			uni.hideTabBar();
			// #endif

			// 状态栏高度
			this.getSystemInfo();
			this.getDeatil();
		},
		methods: {
			// 系统公告
			async getDeatil() {
				// 学校
				const res = await noticeList({
					noticeType: 1,
					pageNum: 1,
					pageSize: 1
				})
				this.list1[0].answer = res.rows[0].noticeTitle
				this.list1[0].date = res.rows[0].createTime.split(' ')[0]
				this.list1[0].falg = res.rows[0].isRead

				// 学校
				const resschool = await noticeList({
					noticeType: 3,
					pageNum: 1,
					pageSize: 1
				})
				this.list2[0].answer = resschool.rows[0].noticeTitle
				this.list2[0].date = resschool.rows[0].createTime.split(' ')[0]
				this.list2[0].falg = resschool.rows[0].isRead
				this.list2[0].label = resschool.rows[0].createByNickName

				// 老师
				this.triggered = true;
				this.downRefresh = true
				this.queryParams.pageNum = 1
				this.list3 = []
				this.getcollectList()
			},

			async getcollectList() {
				const res = await noticeList({
					...this.queryParams,
					noticeType: 4
				})
				this.pageCount = res.total
				res.rows.forEach(element => {
					element.createTime = element.createTime.split(' ')[0]
					element.ids = 1
					element.img = config.pic_prefix + element.createByAvatar
				});
				//停止加载中
				this.triggered = false;
				this.downRefresh = false
				//处理完逻辑停止刷新
				uni.stopPullDownRefresh();
				if (this.list3.length >= this.pageCount) {
					this.status = 'nomore';
				} else {
					let arr = [...this.list3, ...res.rows]
					this.list3 = arr
					if (res.rows.length < 10) {
						this.status = 'nomore';
					}
				}
			},

			//触底加载
			lowerBottom() {
				if (this.queryParams.pageNum < this.pageCount) {
					if (!this.downRefresh) {
						this.downRefresh = true
						this.status = 'loading';
						this.queryParams.pageNum += 1
						this.getcollectList()
					}
				}
			},
			onRefresh() {
				this.triggered = true;
				this.downRefresh = true
				this.queryParams.pageNum = 1
				this.list3 = []
				this.getcollectList()
			},
			onRestore() {
				this.triggered = false; // 需要重置
			},



			updateTabbar(e) {
				this.tabbarIndex = e
			},
			goTo(item) {
				if (item.label == '系统公告') {
					uni.navigateTo({
						url: "/subpackage2/notice/notice"
					})
				} else if (item.id == 0) { // 学校
					uni.navigateTo({
						url: "/subpackage2/notice/schoolNotice?title=" + item.label
					})
				} else if (item.ids == 1) { // 老师
					uni.navigateTo({
						url: "/subpackage2/notice/teacherNotice?title=" + item.noticeTitle + '&id=' + item.noticeId
					})
				} else if(item.label == '积分兑换商品'){
					uni.navigateTo({
						url: "/subpackage3/shop/shop"
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 132rpx;
		background-color: rgb(245, 245, 245);

		// #ifdef APP-PLUS || H5
		height: 100% !important;
		// #endif

		.view1 {
			height: 280rpx;
			width: calc(100% - 60rpx);
			box-sizing: border-box;
			padding: 20rpx;
			background-color: #fff;
			position: relative;
			top: 30rpx;
			margin: auto;
			overflow: auto;
			border-radius: 10rpx;
		}

		.view2 {
			height: calc(100% - 380rpx);
			width: calc(100% - 60rpx);
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #fff;
			position: relative;
			top: 30rpx;
			margin: auto;
			overflow: auto;
			margin-top: 20rpx;
			border-radius: 10rpx;
		}

		.view3 {
			height: calc(100% - 120rpx);
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;
			margin: auto;
			overflow: auto;
			border-radius: 10rpx;

			.zanwu {
				font-size: 30rpx;
				color: #b3adad;
				text-align: center;
				margin-top: 20px;
			}


			.box_scroll {
				height: 100%;
			}
		}

		.items {
			width: 100%;
			height: 120rpx;
			border-bottom: 1px solid rgba(179, 173, 173, 0.2);
			display: flex;
			align-items: center;
			align-content: center;
			flex-wrap: wrap;
			box-sizing: border-box;
			justify-content: space-between;

			.left {
				width: 68rpx;
				height: 68rpx;

				image {
					border-radius: 50%;
					width: 68rpx;
					height: 68rpx;
				}
			}

			.right {
				width: calc(100% - 88rpx);

				.header {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title {
						font-size: 34rpx;
					}

					.red {
						width: 8rpx;
						height: 8rpx;
						background-color: red;
						border-radius: 50%;
					}

					.grey {
						width: 8rpx;
						height: 8rpx;
						background-color: rgb(179, 173, 173);
						border-radius: 50%;
					}
				}

				.bottom {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 20rpx;
					color: rgb(179, 173, 173);
					margin-top: 5rpx;
				}
			}
		}

		.noline {
			border-bottom: none;
		}
	}
</style>